<template>
    <div class='mainContent planDetails' :style="[{'padding-bottom': isOpt && checkLogFlag ? '190px' : 0}]">
        <div class="scorll">
            <div class="content">
                <div class="search" style="padding:0.15rem 2%;">
                    <div class="toBack" @click="$router.push({ path: '/fmam/plan' })" plain> <span class="el-icon-arrow-left">返回</span></div>
                    <div class="stepsBox" style="flex:1;margin:0 5% 0 10%;display: flex;justify-content: flex-start;">
                        <Steps :current="current" style="width:100%;margin:auto;">
                            <Step :title="item.name" v-for="(item,i) in checkLogList" :key="i"></Step>
                        </Steps>
                        <el-tag size="small" v-if="state == 100">已通过</el-tag>
                        <el-tag type="danger" size="small" v-if="state == 11">未通过</el-tag>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="inputName" >
                    <div class="item">
                        <span>计划名称：</span>
                        <span style="flex:1;">{{name}}</span>
                    </div>
                    <div class="item">
                        <span>计划编码：</span>
                        <span style="flex:1;">{{code}}</span>
                    </div>
                    <div class="upload">
                        <span>附件：</span>
                        <img v-if="fileType == 1 && fileUrl" :src="exelIcon" class="avatar" @click="download(fileUrl)">
                        <img v-if="fileType == 2 && fileUrl" :src="fileUrl" class="avatar" @click="download(fileUrl)">
                        <img v-if="fileType == 3 && fileUrl" :src="wordIcon" class="avatar" @click="download(fileUrl)">
                        <span v-if='!fileUrl'>—</span>
                    </div>
                </div>
                <div class="tabBox" style="border-radius:0;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
                    <div class="tableList" ref="tableList">
                        <el-table :data="matList" style="width: 100%" :height="tableOffsetTop" :stripe="true">
                            <template slot="empty">
                                <div class="no_lsit" style="width:96%;margin:auto;">
                                    <img src="./../../assets/images/common/rotary_nodata.png" />
                                </div>
                            </template>
                            <el-table-column prop="matName" class-name="padding-left" label="名称 | 编码" align="center" width='250px'>
                                <template slot-scope="scope">
                                    <span style="color:RGBA(64, 158, 255, 1);">{{scope.row.matName}}{{scope.row.matCode ? '(' + scope.row.matCode + ')' :''}}</span>
                                    <img v-show="scope.row.checkState" src="../../assets/images/fmam/plan/plan_rejected2.png" class="img" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="spec" label="规格型号" align="center" width='100px'>
                                <template slot-scope="scope">
                                    {{scope.row.spec ? scope.row.spec : '—'}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="unitName" label="单位" align="center" width='100px'>
                                <template slot-scope="scope">
                                    {{scope.row.unitName ? scope.row.unitName : '—'}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="number" label="数量" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.number ? scope.row.number : '—'}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="useTime" label="计划进场时间" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.useTime ? scope.row.useTime : '—'}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="usePart" label="计划使用部位" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.usePart ? scope.row.usePart : '—'}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" label="备注" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.remark ? scope.row.remark : '—'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" v-if="state != 11 && checkLogFlag">
                                <template slot-scope="scope">
                                    <el-button v-show="!scope.row.checkState" @click="scope.row.checkState = 1" style="color: #fb0606"  type="text" size="small">驳回</el-button>
                                    <el-button v-show="scope.row.checkState" @click="scope.row.checkState = 0" type="text" size="small">取消</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="infoBox">
                    <div :class="['li' , checkActive == item.id ? 'active' : '']" v-for="(item , index) in checkLogArr" :key="index" @click="getTable(index)">
                        <div class="top">
                            <h2 class="h2">
                                <img  v-if="item.opType == 2" src="../../assets/images/fmam/plan/plan_audit.png" />
                                <img  v-if="item.opType == 3" src="../../assets/images/fmam/plan/plan_review.png" />
                                <img  v-if="item.opType == 4" src="../../assets/images/fmam/plan/plan_check.png" />
                                <span v-if="item.opType == 2">审批信息</span>
                                <span v-if="item.opType == 3">复查信息</span>
                                <span v-if="item.opType == 4">核验信息</span>
                            </h2>
                        </div>
                        <div class="bottom">
                            <img v-if="item.opResult!= 1" src="../../assets/images/fmam/plan/plan_success.png" class="img" />
                            <img v-else src="../../assets/images/fmam/plan/plan_rejected.png" class="img" />
                            <div class="item">
                                <div class="item1">
                                    <img src="../../assets/images/fmam/plan/plan_peo.png" />
                                    <span v-if="item.opType == 2">审批人：</span>
                                    <span v-if="item.opType == 3">复查人：</span>
                                    <span v-if="item.opType == 4">核验人：</span>
                                    <span>{{item.opUserName}}</span>
                                </div>
                                <div class="item1" style="width:60%;">
                                    <img src="../../assets/images/fmam/plan/plan_time.png" />
                                    <span v-if="item.opType == 2">审批时间：</span>
                                    <span v-if="item.opType == 3">复查时间：</span>
                                    <span v-if="item.opType == 4">核验时间：</span>
                                    <span>{{item.opTime}}</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item2">
                                    <img src="../../assets/images/fmam/plan/plan_text.png" />
                                    <span v-if="item.opType == 2">审批说明：</span>
                                    <span v-if="item.opType == 3">复查说明：</span>
                                    <span v-if="item.opType == 4">核验说明：</span>
                                    <Tooltip  transfer :content="item.opDesc ? item.opDesc : '—'" placement="top-start"  max-width='200'>
                                        <div class="p" style="width:3rem;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                            {{item.opDesc ? item.opDesc : '—'}}
                                        </div>
                                    </Tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="submitAll" v-if="isOpt && checkLogFlag">
                    <div class="list">
                        <div class="item">
                            <span class="span" v-if="current == 1">审批结果：</span>
                            <span class="span" v-if="current == 2">复查结果：</span>
                            <span class="span" v-if="current == 3">核验结果：</span>
                            <RadioGroup v-model="opResult">
                                <Radio label="0">通过</Radio>
                                <Radio label="1">驳回</Radio>
                            </RadioGroup>
                        </div>
                    </div>
                        <div class="list">
                        <div class="item" style="align-items: flex-start;">
                            <span class="span" v-if="current == 1">审批说明：</span>
                            <span class="span" v-if="current == 2">复查说明：</span>
                            <span class="span" v-if="current == 3">核验说明：</span>
                            <el-input style="flex:1;"  maxlength="200" show-word-limit placeholder="请输入"  type="textarea"  v-model="opDesc"></el-input>
                        </div>
                    </div>
                    <el-button type="primary" @click="submitFn" plain style="display:block;margin:auto;">提交</el-button>
                </div>
                <div class="btn" v-if="isOpt && !checkLogFlag">
                    <el-button type="primary" @click="switchFn" plain style="display:block;margin:auto;">切换审批</el-button>
                </div>
                <div class="btn" v-if="state == 11 && btnList.includes('fmam/plan/add')">
                    <el-button type="primary" @click="$router.push({ path: '/fmam/plan/add' ,query:{planId:planId}})" plain>重填计划</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getFmamPlanDetail,getFmamPlanCheck,getFmamPlanCheck1,getFmamPlanCheck2,getFmamPlanCheck3} from '@/api/fmam';
export default {
    data () {
        return {
            btnList:[],
            matList:[],
            checkLogArr:[],
            checkLogList:[
                {
                    state:1,
                    name:'提交计划',
                },
                {
                    state:10,
                    name:'材料审批',
                },
                {
                    state:20,
                    name:'材料复审',
                },
                {
                    state:30,
                    name:'材料核验',
                },
            ],
            maxlength:25,
            limitlength:32,
            name:'',
            code:'',
            fileUrl:'',
            fileType:'',
            deptId:"",
            deptName:"",
            planId:'',
            tableOffsetTop:0,
            state:'',
            current:0,
            opResult:'0',
            opDesc:'',
            checkActive:'',//记录从checkLogList的数据下标
            checkLogFlag:true,//记录从checkLogList的数据里面是否可以更改数据
            isOpt:false,
            exelIcon: require("./../../assets/images/fmam/plan/fmam_exel.png"),
            wordIcon: require("./../../assets/images/fmam/plan/fmam_word.png"),
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.planId = this.$route.query.planId;
                this.getDetailsFn();
            }
        },
        opResult(newValue,oldValue){
            if(newValue == 0){
                this.matList.forEach(v => {
                    v.checkState = 0;
                })
            }
        },
        matList:{
            handler :function (value){
                this.opResult = '0';
                value.forEach(v => {
                    if(v.checkState){
                        this.opResult = '1';
                    }
                })
            },
            deep:true,
        }
    },
    methods: {
        // 切换到审批
        switchFn(){
            this.checkActive = "";
            this.getDetailsFn();
        },
        //根据历史记录找到matList
        getTable(index){
            if(this.checkActive == this.checkLogArr[index].id){
                return
            }
            let matList = JSON.parse(this.checkLogArr[index].matList);
            this.initMatList(matList)
            this.checkActive = this.checkLogArr[index].id;
            if(this.checkLogArr.length == 1){
                this.checkLogFlag = false;
            }else{
                if(this.checkActive == this.checkLogArr[this.checkLogArr.length - 1].id){
                    let opType = this.checkLogArr[this.checkLogArr.length - 1].opType;
                    this.checkLogFlag = false;
                    if(opType != 4){
                        this.checkLogFlag = true;
                    }
                }else{
                    this.checkLogFlag = false;
                };
            }

        },
        //切换物资驳回状态
        switchCheckState(item,index){
            this.matList[index]['checkState'] = !item.checkState;
        },
        // 请求材料类型
        getDetailsFn() {
            let params = {
                planId: this.planId
            };
            getFmamPlanDetail(params)
                .then(res => {
                    if (res.code == 200) {
                        let obj = res.data;
                        this.name = obj.name;
                        this.code = obj.code;
                        this.fileUrl = obj.fileUrl;
                        this.state = obj.state;

                        obj.checkLogList = obj.checkLogList.filter(v => v.opType != 1);
                        this.checkLogArr = obj.checkLogList || [];
                        if(this.checkLogArr.length > 0 && this.state != 10){
                            let matList = this.checkLogArr[this.checkLogArr.length - 1].matList ? JSON.parse(this.checkLogArr[this.checkLogArr.length - 1].matList) : obj.matList;
                            this.checkActive =  this.checkLogArr[this.checkLogArr.length - 1].matList ? this.checkLogArr[this.checkLogArr.length - 1].id : obj.id;
                            this.initMatList(matList);

                        }else{
                            let matList = obj.matList;
                            this.initMatList(matList);
                        }

                        let type = this.fileUrl.substring(this.fileUrl.lastIndexOf(".")+1);
                        if(type == 'xls'||type == 'xlsx'){
                            this.fileType = 1;
                        }else if(type == 'png' || type == 'jpg' || type == 'jpeg'){
                            this.fileType = 2;
                        }else if(type == 'doc'){
                            this.fileType = 3;
                        }
                        if(this.state == 11){
                            this.current = this.checkLogArr.length;
                            this.isOpt = false;
                        }else{
                            switch (this.state) {
                                case 10:
                                    this.current = 1;
                                    this.checkLogFlag = true;
                                    this.isOpt = this.btnList.includes('fmam/plan/check');
                                    break;
                                case 20:
                                    this.current = 2;
                                    this.checkLogFlag = true;
                                    this.isOpt = this.btnList.includes('fmam/plan/review');
                                    break;
                                case 30:
                                    this.current = 3;
                                    this.checkLogFlag = true;
                                    this.isOpt = this.btnList.includes('fmam/plan/verify');
                                    break;
                                case 100:
                                    this.current = 4;
                                    this.checkLogFlag = false;
                                    break;
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //初始化matList数据
        initMatList(matList){
            matList.forEach(v => {
                if(v['checkState'] == undefined){
                    v['checkState'] = 0;
                }

            })
            this.matList = matList;
        },
        // 提交数据到表格
        submit(){
            this.matList = [];
            this.selectedList.forEach(v => {
                let obj = {
                    matId : v.id,
                    matCode : v.fullCode,
                    matName : v.name,
                    spec : v.spec,
                    model : v.model,
                    texture : v.texture,
                    unitId : v.unitId,
                    unitName : v.unitName,
                    useTime : new Date(),
                    usePart : '',
                    remark : '',
                    number : 0,
                };
                this.matList.push(obj);
            });
            this.modal = false;
        },
        // 提交数据到数据库
        submitFn(){
            let params = {
                planId : this.planId,
                opType : this.current + 1,
                opResult : this.opResult,
                opDesc : this.opDesc,
                matList : this.matList,
            }
            let setFmamPlan = null;
            if(this.current == 1){
                setFmamPlan = getFmamPlanCheck1;
            }else if(this.current == 2){
                setFmamPlan = getFmamPlanCheck2;
            }else if(this.current == 3){
                setFmamPlan = getFmamPlanCheck3;
            }
            this.setFmamPlan(JSON.stringify(params),setFmamPlan)
        },
        //提交数据到数据库
        setFmamPlan(params,setFmamPlan){
            params = JSON.parse(params);
            setFmamPlan(params)
            .then(res => {
                if (res.code == 200) {
                    this.$router.push({ path: '/fmam/plan' })
                    this.$Message.success("操作成功");
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        cancel(i){
            if(i == 1){
                this.modal = false;
            }else if(i == 2){
                this.matList = [];
                this.$router.push({ path: '/fmam/plan' })
            }
        },
        // 下载附件
        download(url){
            if(url){
                window.open(url);
            }else{
                this.$Message.warning("暂无附件");
            }
        },
    },
    mounted(){
        this.planId = this.$route.query.planId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getDetailsFn();
        this.$nextTick(()=>{
            //在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法，获取更新后的DOM.
            this.tableOffsetTop = window.innerHeight - (this.$refs.tableList.offsetTop + 245);
        })
    },
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>


<style scoped lang='scss'>
@import "./../../assets/style/fmam/mainContent.scss";
@function pxToRem($val) {
    @return $val/100 + rem;
}
/deep/ .padding-left{
    padding-left: pxToRem(50);
    position: relative;
    .img{
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: pxToRem(50);
        height: pxToRem(50);
    }
}
/deep/.planDetails{

    box-sizing: border-box;
    .scorll{
        width: 100%;
        overflow-y: scroll;
        height: 100%;
        .scorll::-webkit-scrollbar {
              width: 6px;
        }
        /*滚动槽*/
        .scorll::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;

        }
        /* 滚动条滑块 */
        .scorll::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        }
    }
    .infoBox{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: pxToRem(15);
        overflow-x: auto;
        &::-webkit-scrollbar {
            height: 8px;
        }
        /*滚动槽*/
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;

        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        }
        &::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(0, 0, 0, 0.4);
        }
        .li{
            width: 33%;
            // height: pxToRem(175);
            background: #FFFFFF;
            border-radius: pxToRem(6);
            margin-right: 0.5%;
            box-sizing: border-box;
            min-width: 33%;
            border: 2px solid transparent;
            box-sizing: border-box;
            &.active{
                border: 2px solid #1891FF;
                box-sizing: border-box;
            }
            &:last-of-type{
                margin-right: 0;
            }
            .top{
                width: 100%;
                height: pxToRem(48);
                padding: pxToRem(15) pxToRem(20);
                box-sizing: border-box;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background-color: rgba(220, 235, 254, 1);
                font-size: pxToRem(14);
                font-family: Source Han Sans CN;
                color: var(--themeColor);
                border-top-right-radius: pxToRem(6);
                border-top-left-radius: pxToRem(6);
                .h2{
                    img{
                        width: pxToRem(14);
                        height: pxToRem(14);
                        margin-right: pxToRem(10);
                    }
                }
            }
            .bottom{
                width: 100%;
                padding: pxToRem(40) pxToRem(20);
                box-sizing: border-box;
                font-size: pxToRem(14);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
                position: relative;
                .img{
                    position: absolute;
                    right: pxToRem(20);
                    top:50%;
                    transform: translateY(-50%);
                    width: pxToRem(75);
                    height: pxToRem(75);
                }
                .item{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-bottom: pxToRem(20);
                    img{
                        margin-right: pxToRem(10);
                    }
                    .item1{
                        width: 40%;
                        span{
                            width: pxToRem(90);
                        }
                    }
                    .item2{
                        width: 90%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        span{
                            &:first-of-type{
                                width: pxToRem(90);
                            }
                            // &:last-of-type{
                            //     width: pxToRem(300);
                            //     overflow: hidden;
                            //     text-overflow: ellipsis;
                            //     white-space: nowrap;
                            // }
                        }
                    }
                }
            }
        }
    }
    .submitAll{
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 98%;
        border-top: 1px solid #eee;
        padding: 10px 2%;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        margin-top: 15px;

        z-index: 99;


        .list{
            margin: 15px 0;
            .item{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .span{
                    width: pxToRem(90);
                }
            }
        }
    }
    .btn{
        display: flex;
        justify-content: center;
        margin-top: 15px;

        // width: 98%;
        // position: fixed;
        // bottom: pxToRem(10);
        // left: 50%;
        // transform: translateX(-50%);
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // border-top: 1px solid #eee;
        // padding: pxToRem(5) 0;
        // box-sizing: border-box;
        // background-color: #fff;
        // z-index: 99;
        // box-shadow: 0px -7px 9px 5px rgba(0, 0, 0, 0.1);
        // border-radius: 10px;
    }
}
/deep/ .upload{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: pxToRem(140);
    height: pxToRem(50);
    span{
        width: pxToRem(90);
        font-weight: 700;
        &:last-of-type{
            height: pxToRem(50);
            line-height: pxToRem(50);
        }
    }
    .avatar {
        width: pxToRem(28);
        height: pxToRem(28);
        display: block;
        cursor: pointer;
    }
}

</style>
